<template>
  <div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >记录详情</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <!-- 人员信息 -->
        <van-cell-group>
          <van-cell title="人员信息" class="bg_grey" />
          <van-cell title="机构" :value="jg"></van-cell>
          <van-cell title="使用人" :value="syr"></van-cell>
          <van-cell title="手机号" :value="sjh"></van-cell>
        </van-cell-group>
        <!-- 车辆信箱 -->
        <van-cell-group>
          <van-cell title="车辆信箱" class="bg_grey" />
          <van-cell title="车牌号" :value="cph"></van-cell>
          <van-cell title="VIN号" :value="vin"></van-cell>
          <van-cell title="车型" :value="cx"></van-cell>
        </van-cell-group>
        <!-- 用车情况 -->
        <van-cell-group>
          <van-cell title="用车情况" class="bg_grey" />
          <van-cell title="使用方式" :value="syfs"></van-cell>
          <van-cell title="申用时间" :value="sysj"></van-cell>
          <van-cell title="申用说明" :value="sysm"></van-cell>
          <van-cell title="提前报备" :value="tqbb"></van-cell>
          <van-cell title="审批时间" :value="spsj"></van-cell>
          <van-cell title="审批人" :value="spr"></van-cell>
          <van-cell title="用/还时间" :value="yhsj"></van-cell>
          <van-cell title="使用时长" :value="sysc"></van-cell>
          <van-cell title="情况填报" :value="qktb"></van-cell>
          <van-cell title="费用由来" :value="fyyl"></van-cell>
          <van-cell title="费用金额" :value="fyje"></van-cell>
          <van-cell title="凭证附件">
            <template #value>
              <div v-for="item in attachmentList" :key="item.id">
                <van-cell>
                  <van-image
                    width="100"
                    height="100"
                    :src="baseUrl + item.file_path"
                /></van-cell>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
        <!-- 行驶轨迹 -->
        <van-cell-group>
          <van-cell title="行驶轨迹" class="bg_grey" />
        </van-cell-group>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24">
        <baidu-map
          class="map"
          :center="center"
          :zoom="zoom"
          @ready="handler"
          style="width: 100%; height: 600px"
        >
          <bm-control>
            <van-button type="info" @click="play = true" size="small"
              >运行轨迹</van-button
            >
            <van-button
              type="info"
              @click="zoom++"
              size="small"
              style="margin-left: 10px"
              >放大</van-button
            >
            <van-button
              type="info"
              @click="zoom--"
              size="small"
              style="margin-left: 10px"
              >缩小</van-button
            >
          </bm-control>

          <bm-marker :position="startPos">
            <bm-label
              content="起点"

            />
          </bm-marker>
          <bm-marker :position="endPos">
            <bm-label
              content="终点"

            />
          </bm-marker>
          <bml-lushu
            @stop="reset"
            :path="points"
            :icon="icon"
            :play="play"
            :rotation="true"
          >
          </bml-lushu>
        </baidu-map>
      </van-col>
    </van-row>
  </div>
</template>

<script>
/**
 * 用车记录详情页
 */
import { base_uri, Api } from "../../../../api/api_config";
import { BmlLushu } from "vue-baidu-map";
export default {
  data() {
    return {
      baseUrl: "",
      attachmentList: [],
      icon: {
        url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 } },
      },
      useRecord: {},
      jg: "",
      syr: "",
      sjh: "",
      cph: "",
      vin: "",
      cx: "",
      syfs: "",
      sysj: "",
      sysm: "",
      tqbb: "",
      spsj: "",
      spr: "",
      yhsj: "",
      sysc: "",
      qktb: "",
      fyyl: "",
      fyje: "",
      BMap: {},
      map: {},
      center: { lng: 0, lat: 0 },
      zoom: 3,
      points: [],
      speed: 1000,
      play: false,
      startPos: { lng: 0, lat: 0 },
      endPos: { lng: 0, lat: 0 },
    };
  },
  components: {
    BmlLushu,
  },
  mounted() {
    this.useRecord = this.$store.state.useRecord;
    this.initData();
  },
  methods: {
    initData() {
      this.baseUrl = base_uri;
      this.jg = this.useRecord.company.companyName;
      this.syr = this.useRecord.company.userName;
      this.sjh = this.useRecord.company.mobile;
      this.cph = this.useRecord.vehicleInfo.plateNum;
      this.vin = this.useRecord.vehicleInfo.vinNo;
      this.cx =
        this.useRecord.vehicleInfo.vehicleSeries.seriesFactory +
        this.useRecord.vehicleInfo.vehicleSeries.seriesName +
        this.useRecord.vehicleInfo.vehicleBrand.brandName +
        this.useRecord.vehicleInfo.vehicleBrand.brandCode;
      this.syfs =
        this.recordTypeEnum(this.useRecord.recordType) +
        this.syfsEnum(this.useRecord.childType);
      this.sysj =
        this.useRecord.completeTime !== null
          ? this.$moment(this.useRecord.completeTime).format(
              "YYYY-MM-DD HH:MM:SS"
            )
          : "无";
      this.sysm = this.useRecord.remark !== null ? this.useRecord.remark : "无";
      this.tqbb = "无";
      this.spsj =
        this.useRecord.approveTime !== null
          ? this.$moment(this.useRecord.approveTime).format(
              "YYYY-MM-DD HH:MM:SS"
            )
          : "无";
      this.spr =
        this.useRecord.approveUserDetail !== null ? this.useRecord.approveUserDetail.name : "无";
      const st =
        this.useRecord.actBeginTime !== null
          ? this.$moment(this.useRecord.actBeginTime).format(
              "YYYY-MM-DD HH:MM:SS"
            )
          : "无";
      const ed =
        this.useRecord.actEndTime !== null
          ? this.$moment(this.useRecord.actEndTime).format(
              "YYYY-MM-DD HH:MM:SS"
            )
          : "无";
      this.yhsj = st + "/" + ed;

      if (
        this.useRecord.actBeginTime !== null &&
        this.useRecord.actEndTime !== null
      ) {
        this.sysc =
          this.$moment(this.useRecord.actBeginTime).diff(
            this.$moment(this.useRecord.actEndTime),
            "minutes"
          ) + "分钟";
      } else {
        this.sysc = "无";
      }
      this.qktb =
        this.useRecord.backUserMemo !== null
          ? this.useRecord.backUserMemo
          : "无";
      this.fyyl =
        this.useRecord.backCostOrigin !== null
          ? this.useRecord.backCostOrigin
          : "无";
      this.fyje =
        this.useRecord.backCost !== null
          ? this.useRecord.backCost + "元"
          : "无";
    },
    queryPosition(sn, begin, end) {
      let that = this;
      let url = Api.position.history.url;
      begin = this.$moment(begin).format("YYYY-MM-DD HH:MM:SS");
      if (end === null) {
        end = this.$moment(new Date()).format("YYYY-MM-DD HH:MM:SS");
      }
      url += "?sns=" + sn + "&startTime=" + begin + "&endTime=" + end;
      this.$axios({
        method: Api.position.history.method,
        url: url,
      })
        .then(function (res) {
          that.points = [];
          for (let i = 0; i < res.data.items.length; i++) {
            var p0 = res.data.items[i].longitude;
            var p1 = res.data.items[i].latitude;
            var point = new that.BMap.Point(p0, p1);
            if (i === 0) {
              that.center = point;
              that.startPos = point;
            }
            if (i === res.data.items.length - 1) {
              that.endPos = point;
            }
            that.points.push(point);
          }
          that.useMap();
        })
        .catch(function (e) {
          console.log(e);
        });
    },
    back() {
      this.$router.push("/carUsage/usageLog");
    },
    reset() {
      this.play = false;
    },
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      this.zoom = 12;
      // this.useRecord.actBeginTime = "2020-12-09 07:03:00";
      // this.useRecord.actEndTime = "2020-12-09 07:49:00";
      this.queryPosition(
        this.useRecord.vehicleInfo.deviceInfo.sn,
        this.useRecord.actBeginTime,
        this.useRecord.actEndTime
      );
    },
    useMap() {
      var polyLine = new this.BMap.Polyline(this.points, {
        strokeColor: "blue", 
        strokeWeight: 5, 
        strokeOpacity: 1, 
      });
      //this.setZoom();
      this.map.addOverlay(polyLine);
    },
    setZoom() {
      var view = this.map.getViewport(eval(this.points));
      var mapZoom = view.zoom;
      var centerPoint = view.center;
      this.map.centerAndZoom(centerPoint, mapZoom);
    },
    syfsEnum(value) {
      switch (value) {
        case 1:
          return "试驾";
        case 2:
          return "客用";
        case 3:
          return "救援";
        case 4:
          return "维保";
        case 5:
          return "挪车";
        case 6:
          return "加油";
      }
    },
    recordTypeEnum(value) {
      switch (value) {
        case 1:
          return "用车";
        case 2:
          return "维护";
      }
    },
  },
};
</script>

<style scoped>
.van-cell .van-cell__title {
  min-width: 30%;
}
.van-cell .van-cell__value {
  min-width: 70%;
}
</style>
